<template>
  <div class="app-container">
    <!-- 顶部应用标题 -->
    <van-nav-bar title="应用" fixed placeholder left-arrow />

    <!-- 双行应用入口 -->
    <van-grid :column-num="4" :border="false" class="app-grid">
      <van-grid-item
        v-for="app in apps"
        :key="app.id"
        :text="app.name"
        :icon="app.icon"
        :icon-color="app.color"
      />
    </van-grid>

    <!-- 功能服务分组 -->
    <div class="service-group">
      <h3 class="group-title">办公服务</h3>
      <van-grid :column-num="4" :border="false">
        <van-grid-item text="请假" icon="todo-list" icon-color="#1890ff" to="/leave"/>
        <van-grid-item text="考勤" icon="contact" icon-color="#52c41a" to="/attendancehistory" />
        <van-grid-item text="任务" icon="cluster" icon-color="#fadb14" to="/task"/>
        <van-grid-item text="报销" icon="cart-o" icon-color="#13c2c2" to="/expense"/>
      </van-grid>
    </div>

    <!-- 通讯服务分组 -->
    <div class="service-group">
      <h3 class="group-title">沟通服务</h3>
      <van-grid :column-num="4" :border="false">
        <van-grid-item text="留言" icon="chat" icon-color="#ff4d4f" to="/messages"/>
        <van-grid-item text="公告" icon="comment" icon-color="#1da1f2" to="/notice"/>
      </van-grid>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
.app-container {
  background: #f5f7fa;
  min-height: 100vh;
}

.app-grid {
  margin: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  
  :deep(.van-grid-item__content) {
    padding: 16px 8px;
    
    .van-icon {
      font-size: 28px;
    }
    
    .van-grid-item__text {
      font-size: 12px;
      color: #595959;
    }
  }
}

.service-group {
  margin: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  
  .group-title {
    padding: 12px 16px;
    margin: 0;
    font-size: 16px;
    color: #1f1f1f;
    border-bottom: 1px solid #f0f0f0;
  }
}

.feature-services {
  margin: 16px;
  background: white;
  border-radius: 8px;
  
  .service-tags {
    padding: 12px;
    
    .van-tag {
      margin: 4px;
      padding: 4px 12px;
    }
  }
}
</style>